<template>
  <div class="app-container">
    <hr/>
    <div class="div-k">
      <table>
        <tr>
          <td colspan="2">Korsou
            <hr/>
          </td>
        </tr>
        <tr>
          <td>
            <table>
              <tr>
                <th class="th-digit-count">数字位数</th>
                <th class="th-digit-money">金额</th>
                <th class="th-pool-count">Pool</th>
                <th class="th-pool-money">金额</th>
              </tr>
              <tr>
                <td>0000~9999</td>
                <td>
                  <el-input class="input-money" v-model="digit4_limit_K"/>
                </td>
                <td>0000~9999</td>
                <td>
                  <el-input class="input-money" v-model="digit4_pool_limit_K"/>
                </td>
              </tr>
              <tr>
                <td>000~999</td>
                <td>
                  <el-input class="input-money" v-model="digit3_limit_K"/>
                </td>
                <td>0003~999</td>
                <td>
                  <el-input class="input-money" v-model="digit3_pool_limit_K"/>
                </td>
              </tr>
              <tr>
                <td>00~99</td>
                <td>
                  <el-input class="input-money" v-model="digit2_limit_K"/>
                </td>
                <td>00~99</td>
                <td>
                  <el-input class="input-money" v-model="digit2_pool_limit_K"/>
                </td>
              </tr>
              <tr align="right">
                <td colspan="4">
                  <el-button type="primary" @click="updateRegionLimit('K')">确定</el-button>
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <hr/>
                  <i>指定号码限额</i><label v-html="pass"/>
                  号码：
                  <el-input class="input-money" v-model="numberK"/>
                  金额：
                  <el-input class="input-money" v-model="limitK"/>
                </td>
              </tr>
              <tr align="right">
                <td colspan="4">
                  <el-button align="right" type="primary" @click="addSpecialNumber(1, numberK, limitK)">确定</el-button>
                </td>
              </tr>
            </table>
          </td>

          <td><label v-html="pass"/></td>
          <td>
            <div style="margin-top: 10px;width: 1px;height: 260px; background: darkgray;"></div>
          </td>
          <td><label v-html="pass"/></td>

          <td valign="top">
            <el-table
              :data="dataListK"
              style="width: 100%">
              <el-table-column
                class="el-tc el-tc-number"
                prop="number"
                label="号码"
                width="60px"/>
              <el-table-column
                class="el-tc el-tc-money"
                prop="limit"
                label="金额"
                width="60px"/>
              <el-table-column
                class="el-tc el-tc-operation"
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteSpecialNumber(scope.$index, dataListK)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </td>
        </tr>
      </table>
    </div>

    <br/>
    <hr/>
    <div class="div-f">
      <table>
        <tr>
          <td colspan="2">Flamingo
            <hr/>
          </td>
        </tr>
        <tr>
          <td>
            <table>
              <tr>
                <th class="th-digit-count">数字位数</th>
                <th class="th-digit-money">金额</th>
                <th class="th-pool-count">Pool</th>
                <th class="th-pool-money">金额</th>
              </tr>
              <tr>
                <td>0000~9999</td>
                <td>
                  <el-input class="input-money" v-model="digit4_limit_F"/>
                </td>
                <td>0000~9999</td>
                <td>
                  <el-input class="input-money" v-model="digit4_pool_limit_F"/>
                </td>
              </tr>
              <tr>
                <td>000~999</td>
                <td>
                  <el-input class="input-money" v-model="digit3_limit_F"/>
                </td>
                <td>0003~999</td>
                <td>
                  <el-input class="input-money" v-model="digit3_pool_limit_F"/>
                </td>
              </tr>
              <tr>
                <td>00~99</td>
                <td>
                  <el-input class="input-money" v-model="digit2_limit_F"/>
                </td>
                <td>00~99</td>
                <td>
                  <el-input class="input-money" v-model="digit2_pool_limit_F"/>
                </td>
              </tr>
              <tr align="right">
                <td colspan="4">
                  <el-button type="primary" @click="updateRegionLimit('F')">确定</el-button>
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <hr/>
                  <i>指定号码限额</i><label v-html="pass"/>
                  号码：
                  <el-input class="input-money" v-model="numberF"/>
                  金额：
                  <el-input class="input-money" v-model="limitF"/>
                </td>
              </tr>
              <tr align="right">
                <td colspan="4">
                  <el-button align="right" type="primary" @click="addSpecialNumber(2, numberF, limitF)">确定</el-button>
                </td>
              </tr>
            </table>
          </td>

          <td><label v-html="pass"/></td>
          <td>
            <div style="margin-top: 10px;width: 1px;height: 260px; background: darkgray;"></div>
          </td>
          <td><label v-html="pass"/></td>

          <td valign="top">
            <el-table
              :data="dataListF"
              style="width: 100%">
              <el-table-column
                class="el-tc el-tc-number"
                prop="number"
                label="号码"
                width="60px"/>
              <el-table-column
                class="el-tc el-tc-money"
                prop="limit"
                label="金额"
                width="60px"/>
              <el-table-column
                class="el-tc el-tc-operation"
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteSpecialNumber(scope.$index, dataListF)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </td>
        </tr>
      </table>
    </div>

    <br/>
    <hr/>
    <div class="div-d">
      <table>
        <tr>
          <td colspan="2">Diario
            <hr/>
          </td>
        </tr>
        <tr>
          <td>
            <table>
              <tr>
                <th class="th-digit-count">数字位数</th>
                <th class="th-digit-money">金额</th>
                <th class="th-pool-count">Pool</th>
                <th class="th-pool-money">金额</th>
              </tr>
              <tr>
                <td>0000~9999</td>
                <td>
                  <el-input class="input-money" v-model="digit4_limit_D"/>
                </td>
                <td>0000~9999</td>
                <td>
                  <el-input class="input-money" v-model="digit4_pool_limit_D"/>
                </td>
              </tr>
              <tr>
                <td>000~999</td>
                <td>
                  <el-input class="input-money" v-model="digit3_limit_D"/>
                </td>
                <td>0003~999</td>
                <td>
                  <el-input class="input-money" v-model="digit3_pool_limit_D"/>
                </td>
              </tr>
              <tr>
                <td>00~99</td>
                <td>
                  <el-input class="input-money" v-model="digit2_limit_D"/>
                </td>
                <td>00~99</td>
                <td>
                  <el-input class="input-money" v-model="digit2_pool_limit_D"/>
                </td>
              </tr>
              <tr align="right">
                <td colspan="4">
                  <el-button type="primary" @click="updateRegionLimit('D')">确定</el-button>
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <hr/>
                  <i>指定号码限额</i><label v-html="pass"/>
                  号码：
                  <el-input class="input-money" v-model="numberD"/>
                  金额：
                  <el-input class="input-money" v-model="limitD"/>
                </td>
              </tr>
              <tr align="right">
                <td colspan="4">
                  <el-button align="right" type="primary" @click="addSpecialNumber(3, numberD, limitD)">确定</el-button>
                </td>
              </tr>
            </table>
          </td>

          <td><label v-html="pass"/></td>
          <td>
            <div style="margin-top: 10px;width: 1px;height: 260px; background: darkgray;"></div>
          </td>
          <td><label v-html="pass"/></td>

          <td valign="top">
            <el-table
              :data="dataListD"
              style="width: 100%">
              <el-table-column
                class="el-tc el-tc-number"
                prop="number"
                label="号码"
                width="60px"/>
              <el-table-column
                class="el-tc el-tc-money"
                prop="limit"
                label="金额"
                width="60px"/>
              <el-table-column
                class="el-tc el-tc-operation"
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteSpecialNumber(scope.$index, dataListD)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </td>
        </tr>
      </table>
    </div>

    <br/>
    <hr/>
    <div class="div-s">
      <table>
        <tr>
          <td colspan="2">ST
            <hr/>
          </td>
        </tr>
        <tr>
          <td>
            <table>
              <tr>
                <th class="th-digit-count">数字位数</th>
                <th class="th-digit-money">金额</th>
                <th class="th-pool-count">Pool</th>
                <th class="th-pool-money">金额</th>
              </tr>
              <tr>
                <td>0000~9999</td>
                <td>
                  <el-input class="input-money" v-model="digit4_limit_S"/>
                </td>
                <td>0000~9999</td>
                <td>
                  <el-input class="input-money" v-model="digit4_pool_limit_S"/>
                </td>
              </tr>
              <tr>
                <td>000~999</td>
                <td>
                  <el-input class="input-money" v-model="digit3_limit_S"/>
                </td>
                <td>0003~999</td>
                <td>
                  <el-input class="input-money" v-model="digit3_pool_limit_S"/>
                </td>
              </tr>
              <tr>
                <td>00~99</td>
                <td>
                  <el-input class="input-money" v-model="digit2_limit_S"/>
                </td>
                <td>00~99</td>
                <td>
                  <el-input class="input-money" v-model="digit2_pool_limit_S"/>
                </td>
              </tr>
              <tr align="right">
                <td colspan="4">
                  <el-button type="primary" @click="updateRegionLimit('S')">确定</el-button>
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <hr/>
                  <i>指定号码限额</i><label v-html="pass"/>
                  号码：
                  <el-input class="input-money" v-model="numberS"/>
                  金额：
                  <el-input class="input-money" v-model="limitS"/>
                </td>
              </tr>
              <tr align="right">
                <td colspan="4">
                  <el-button align="right" type="primary" @click="addSpecialNumber(4, numberS, limitS)">确定</el-button>
                </td>
              </tr>
            </table>
          </td>

          <td><label v-html="pass"/></td>
          <td>
            <div style="margin-top: 10px;width: 1px;height: 260px; background: darkgray;"></div>
          </td>
          <td><label v-html="pass"/></td>

          <td valign="top">
            <el-table
              :data="dataListS"
              style="width: 100%">
              <el-table-column
                class="el-tc el-tc-number"
                prop="number"
                label="号码"
                width="60px"/>
              <el-table-column
                class="el-tc el-tc-money"
                prop="limit"
                label="金额"
                width="60px"/>
              <el-table-column
                class="el-tc el-tc-operation"
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteSpecialNumber(scope.$index, dataListS)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import G from "@/components/G";

  export default {
    data() {
      return {
        pass: '&emsp;&emsp;',
        /*单独region*/
        regionK: {},
        regionF: {},
        regionD: {},
        regionS: {},
        requestRegion: null,

        regionsData: [],
        //K左数据
        digit4_limit_K: 40,
        digit3_limit_K: 0,
        digit2_limit_K: 0,
        digit4_pool_limit_K: 0,
        digit3_pool_limit_K: 0,
        digit2_pool_limit_K: 0,
        digit4_limit_F: 40,
        digit3_limit_F: 0,
        digit2_limit_F: 0,
        digit4_pool_limit_F: 0,
        digit3_pool_limit_F: 0,
        digit2_pool_limit_F: 0,
        digit4_limit_D: 40,
        digit3_limit_D: 0,
        digit2_limit_D: 0,
        digit4_pool_limit_D: 0,
        digit3_pool_limit_D: 0,
        digit2_pool_limit_D: 0,
        digit4_limit_S: 40,
        digit3_limit_S: 0,
        digit2_limit_S: 0,
        digit4_pool_limit_S: 0,
        digit3_pool_limit_S: 0,
        digit2_pool_limit_S: 0,
        //K右列表数据
        dataListK: [],
        dataListF: [],
        dataListD: [],
        dataListS: [],
        //添加特殊号码
        numberK: 0,
        limitK: 0,
        numberF: 0,
        limitF: 0,
        numberD: 0,
        limitD: 0,
        numberS: 0,
        limitS: 0,
      }
    },
    methods: {
      getRegions() {
        axios.post(G.host + 'getRegions').then(res => {
          this.regionsData = res.data
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].region_key === 'K') {
              this.regionK = res.data[i]
              this.digit4_limit_K = res.data[i].digit4_limit
              this.digit3_limit_K = res.data[i].digit3_limit
              this.digit2_limit_K = res.data[i].digit2_limit
              this.digit4_pool_limit_K = res.data[i].digit4_pool_limit
              this.digit3_pool_limit_K = res.data[i].digit3_pool_limit
              this.digit2_pool_limit_K = res.data[i].digit2_pool_limit
            } else if (res.data[i].region_key === 'F') {
              this.regionF = res.data[i]
              this.digit4_limit_F = res.data[i].digit4_limit
              this.digit3_limit_F = res.data[i].digit3_limit
              this.digit2_limit_F = res.data[i].digit2_limit
              this.digit4_pool_limit_F = res.data[i].digit4_pool_limit
              this.digit3_pool_limit_F = res.data[i].digit3_pool_limit
              this.digit2_pool_limit_F = res.data[i].digit2_pool_limit
            } else if (res.data[i].region_key === 'D') {
              this.regionD = res.data[i]
              this.digit4_limit_D = res.data[i].digit4_limit
              this.digit3_limit_D = res.data[i].digit3_limit
              this.digit2_limit_D = res.data[i].digit2_limit
              this.digit4_pool_limit_D = res.data[i].digit4_pool_limit
              this.digit3_pool_limit_D = res.data[i].digit3_pool_limit
              this.digit2_pool_limit_D = res.data[i].digit2_pool_limit
            } else if (res.data[i].region_key === 'S') {
              this.regionS = res.data[i]
              this.digit4_limit_S = res.data[i].digit4_limit
              this.digit3_limit_S = res.data[i].digit3_limit
              this.digit2_limit_S = res.data[i].digit2_limit
              this.digit4_pool_limit_S = res.data[i].digit4_pool_limit
              this.digit3_pool_limit_S = res.data[i].digit3_pool_limit
              this.digit2_pool_limit_S = res.data[i].digit2_pool_limit
            }
          }
        })
      },
      //更新号码金额限额
      updateRegionLimit(region) {
        if (region === 'K') {
          this.requestRegion = this.regionK
          this.requestRegion.digit4_limit = this.digit4_limit_K
          this.requestRegion.digit3_limit = this.digit3_limit_K
          this.requestRegion.digit2_limit = this.digit2_limit_K
          this.requestRegion.digit4_pool_limit = this.digit4_pool_limit_K
          this.requestRegion.digit3_pool_limit = this.digit3_pool_limit_K
          this.requestRegion.digit2_pool_limit = this.digit2_pool_limit_K
        } else if (region === 'F') {
          this.requestRegion = this.regionF
          this.requestRegion.digit4_limit = this.digit4_limit_F
          this.requestRegion.digit3_limit = this.digit3_limit_F
          this.requestRegion.digit2_limit = this.digit2_limit_F
          this.requestRegion.digit4_pool_limit = this.digit4_pool_limit_F
          this.requestRegion.digit3_pool_limit = this.digit3_pool_limit_F
          this.requestRegion.digit2_pool_limit = this.digit2_pool_limit_F
        } else if (region === 'D') {
          this.requestRegion = this.regionD
          this.requestRegion.digit4_limit = this.digit4_limit_D
          this.requestRegion.digit3_limit = this.digit3_limit_D
          this.requestRegion.digit2_limit = this.digit2_limit_D
          this.requestRegion.digit4_pool_limit = this.digit4_pool_limit_D
          this.requestRegion.digit3_pool_limit = this.digit3_pool_limit_D
          this.requestRegion.digit2_pool_limit = this.digit2_pool_limit_D
        } else if (region === 'S') {
          this.requestRegion = this.regionS
          this.requestRegion.digit4_limit = this.digit4_limit_S
          this.requestRegion.digit3_limit = this.digit3_limit_S
          this.requestRegion.digit2_limit = this.digit2_limit_S
          this.requestRegion.digit4_pool_limit = this.digit4_pool_limit_S
          this.requestRegion.digit3_pool_limit = this.digit3_pool_limit_S
          this.requestRegion.digit2_pool_limit = this.digit2_pool_limit_S
        }
        let param = JSON.stringify(this.requestRegion)
        axios.post(G.host + 'updateRegionLimit', param, {
          headers: {
            "Content-Type": "application/json;charset=utf-8"
          }
        }).then(res => {
          this.$notify({
            title: '保存',
            message: this.$createElement('i', {style: 'color: teal'}, '成功！'),
            duration: 2000
          })
        })
      },

      getSpecialNumbers() {
        axios.get('http://75.102.23.103:8001/getSpecialNumbers').then(res => {
          this.dataListK = res.data.knumbers
          this.dataListF = res.data.fnumbers
          this.dataListD = res.data.dnumbers
          this.dataListS = res.data.snumbers
        })
      },

      //添加特殊号码-
      addSpecialNumber(region_id, number, limit) {
        let param = '&region_id=' + region_id
          + '&number=' + number
          + '&limit=' + limit
        axios.post(G.host + 'addSpecialNumber', param).then(res => {
          this.getSpecialNumbers()
        })
      },

      //删除特殊号码
      deleteSpecialNumber(index, dataList) {
        let param = '&id=' + dataList[index].id
        axios.post(G.host + 'deleteSpecialNumber', param).then(res => {
          dataList.splice(index, 1)
          this.getSpecialNumbers()
        })
      }
    },
    mounted() {
      this.getRegions()
      this.getSpecialNumbers()
    }
  }
</script>

<style>
  .input-money {
    width: 80px;
  }

  .th-digit-count {
    width: 160px;
    text-align: left;
  }

  .th-digit-money {
    width: 100px;
    text-align: left;
  }

  .th-pool-count {
    width: 160px;
    text-align: left;
  }

  .th-pool-money {
    text-align: left;
  }

  .el-tc {
    width: 160px;
  }
</style>
